<template>
    <div class="permissionMain">
        <div v-if="permissionType==1">
            <select-menu @onSelect="onSelect" />
        </div>
        <div class="sysPermission">
            <div class="buttons">
                <el-button icon="el-icon-plus" @click="addMenuPermission">添加</el-button>
                <el-button icon="el-icon-delete" @click="deletePermission">删除</el-button>
                <el-input style="flex:1;margin-left:100px" placeholder="请输入权限名称" prefix-icon="el-icon-search" v-model="searchKey">
                </el-input>
            </div>
            <div class="sysPermissionTable">
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!this.isShowTable" :rows="15" animated />
                <el-table ref="permissionTreeTable" v-if="this.isShowTable" highlight-current-row :row-class-name="tableRowClassName" @current-change="handleRowChange" tooltip-effect="dark" row-key="id" :data="tableData" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column type="selection" label="序号"></el-table-column>
                    <el-table-column prop="name" label="权限名称">
                    </el-table-column>
                    <el-table-column prop="type" label="权限类型">
                        <template slot-scope="scope">
                            {{getPermissionTypeName(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="code" label="权限码">
                    </el-table-column>
                    <el-table-column v-if="type==2" prop="resourceUrl" width="300" label="菜单链接">
                    </el-table-column>
                    <el-table-column width="300" label="操作">
                        <template slot-scope="scope">
                            <el-button icon="el-icon-edit" @click="updatePermission(scope.$index, scope.row)">编辑</el-button>
                            <el-button v-if="scope.row.type==2" icon="el-icon-plus" @click="addChildrenPermission(scope.row)">添加子菜单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,50,100, 200, 300, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <add-permission-dialog v-if="isShowAddPermission" @confirm="confirm" :params="params" @close="close" />
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import { namespace } from 'vuex-class';
    import * as _ from 'lodash';
    import AdminApiActions from "@/components/api/admin-api-actions";
    import AddPermissionDialog from "@/components/admin-manager/user-role-manager/sys-permission/add-permission-dialog.vue";
    import TreeUtils from '@/components/common/tree-utils';
    import SelectMenu from "@/components/admin-manager/user-role-manager/sys-permission/select-menu.vue";
    @Component({
        components: {
            AddPermissionDialog,
            SelectMenu
        }
    })
    export default class SysUser extends Vue {
        public isShowAddPermission: boolean = false;
        public tableData: Array < any >= new Array < any > ();
        public params: any = {};
        public total: Number = 0;
        public isShowTable: boolean = false;
        public pageSize: number = 10;
        public curPage: Number = 1;
        public permissionType: any = "";
        public parentId: any = "";
        async created() {
            this.permissionType = this.$route.query.type;
            //执行父类赋值逻辑
            let selectMenuCacheId: any = localStorage.getItem("selectMenuCacheId");
            if (selectMenuCacheId && this.permissionType == 1) {
                this.parentId = selectMenuCacheId;
            } else {
                this.parentId = "";
            }
            await this.initTableData();
            //执行菜单选中逻辑
            this.cacheTreeSelect();
        }
        //执行菜单选中逻辑
        public cacheTreeSelect() {
            this.$nextTick(() => {
                let selectOperatorCacheId: any = localStorage.getItem("selectOperatorCacheId");
                if (selectOperatorCacheId) {
                    this.cacheCheck(selectOperatorCacheId);
                } else {
                    TreeUtils.toggleRowExpansion(this.tableData, false, this);
                }
            });
        }
        public cacheCheck(selectOperatorCacheId: any) {
            let searchResult: any = new Array < any > ();
            TreeUtils.expendTreeData(this.tableData, searchResult);
            let currentItem = searchResult.find(item => item.id == selectOperatorCacheId);
            let fatherItems = new Array < any > ();
            TreeUtils.addFather(searchResult, fatherItems, currentItem);
            for (let i = fatherItems.length - 1; i >= 0; i--) {
                if (this.$refs.permissionTreeTable) {
                    (this.$refs.permissionTreeTable as any).toggleRowExpansion(fatherItems[i], true);
                }
            }
        }
        public tableRowClassName({ row, rowIndex }) {
            let selectOperatorCacheId: any = localStorage.getItem("selectOperatorCacheId");
            if (row.id === selectOperatorCacheId) {
                return 'current-row';
            }
            return '';
        }
        public handleRowChange(val) {
            localStorage.setItem("selectOperatorCacheId", val.id);
        }
        @Watch("$route")
        public async routeChange(from: any, to: any) {
            this.permissionType = from.query.type;
            if (this.permissionType == 2) {
                this.parentId = "";
            }
            this.isShowTable = false;
            this.cacheTreeSelect();
            await this.initTableData();
        }
        public async initTableData() {
            let result: any = await AdminApiActions.getSysPermissionPage({ name: "", type: this.permissionType, parentId: this.parentId });
            let resData: any = result.data;
            if (this.permissionType == 2 && result.data) {
                let treeData = TreeUtils.buildTree(resData);
                this.tableData = treeData;
            }
            if (this.permissionType == 1 && result.data) {
                this.tableData = resData;
            }
            this.isShowTable = true;
        }
        public getPermissionTypeName(row: any) {
            if (row.type === "2") {
                return "菜单权限";
            }
            return "操作权限";
        }
        public async onSelect(id: any) {
            this.parentId = id;
            this.isShowTable = false;
            await this.initTableData();
            this.isShowTable = true;
        }
        //编辑用户
        public updatePermission(index: any, item: any) {
            this.params.type = "update";
            this.params.form = {
                id: item.id,
                name: item.name,
                type: item.type,
                parentId: item.parentId,
                code: item.code,
                resourceUrl: item.resourceUrl
            }
            this.isShowAddPermission = true;
        }
        public addMenuPermission() {
            if (this.permissionType == 2) {
                this.parentId = "";
            }
            this.addPermission();
        }
        //添加用户
        public addPermission() {
            this.params.form = {
                id: "",
                name: "",
                type: this.permissionType,
                parentId: this.parentId,
                code: "",
                resourceUrl: ""
            }
            this.params.type = "add";
            this.isShowAddPermission = true;
        }

        public addChildrenPermission(row: any) {
            this.params.form = {
                id: "",
                name: "",
                type: this.permissionType,
                parentId: row.id,
                code: "",
                resourceUrl: ""
            }
            this.params.type = "add";
            this.isShowAddPermission = true;
        }
        //权限
        public async deletePermission() {
            let permissionTable: any = this.$refs.permissionTreeTable;
            let selectData: Array < any >= permissionTable.selection;
            await AdminApiActions.deletePermission(selectData);
            await this.initTableData();
        }
        //关闭弹出框
        public close() {
            this.isShowAddPermission = false;
        }
        public async confirm() {
            this.isShowTable = true;
            this.isShowAddPermission = false;
            await this.initTableData();
        }
        //每页数量改变
        public async handleSizeChange(pageSize: any) {
            this.isShowTable = false;
            this.pageSize = pageSize;
            await this.initTableData();
        }
        //页数改变
        public async handleCurrentChange(curPage: any) {
            this.isShowTable = false;
            this.curPage = curPage;
            await this.initTableData();
        }
    }
</script>
<style lang="less">
    .permissionMain {
        height: calc(100% - 40px);
        display: flex;
        flex-direction: row;

        .sysPermission {
            background-color: white;
            height: 100%;
            width: 100%;
            margin-left: 10px;

            .el-table__body-wrapper {
                height: calc(100% - 70px);
            }

            .el-main {
                padding: 0px 20px;
            }

            .buttons {
                display: flex;
                flex-direction: row;
            }

            .sysPermissionTable {
                width: calc(100% - 5px);

                .el-table__body-wrapper {
                    overflow-y: auto;
                    height: calc(100% - 70px);
                }

                height: calc(100% - 60px);

                .el-table {
                    height: calc(100% - 10px);
                }

                .el-pagination {
                    margin-top: 12px;
                }
            }

            .el-dialog__body {
                padding: 5px 20px;
            }

            .el-dialog__footer {
                padding: 0px 20px 20px;
            }

            .el-form-item {
                display: flex;

                .el-form-item__label {
                    width: 100px;
                }

                .el-form-item__content {
                    flex: 1;
                    margin-right: 40px;
                }
            }
        }
    }
</style>